<template>
  <div class="GlobalDestination-container">
    <div class="container">
      <h2 class="module-title">全球目的地 <span>（按拼音首字母排序）</span></h2>
      <div class="list">
        <div
          class="listItem"
          v-for="(item, index) in country"
          :key="index"
          v-if="item.con.length > 0"
        >
          <h2 class="title">{{ item.name }}</h2>
          <ul class="con">
            <li v-for="(item, index) in item.con" :key="index">
              <a href="#"
                >{{ item[0] }} <span>{{ item[1] }}</span></a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import data from "../utils/data.json";
export default {
  name: "GlobalDestination",
  props: ["globalDesData"],
  data() {
    return {
      country: [],
    };
  },
  mounted() {
    if (data) {
      this.country = data;
    }
  },
  computed: {},
  methods: {},
};
</script>

<style lang='stylus' scoped>
.GlobalDestination-container {
  padding-top: 20px;
  background-color: #eee;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.module-title {
  margin-bottom: 25px;
  font-size: 32px;
  line-height: 30px;
  font-weight: normal;

  span {
    font-size: 14px;
    color: #a8a8a8;
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .listItem {
    width: 400px;
    display: flex;
    margin-bottom: 10px;

    .title {
      width: 40px;
    }

    .con {
      width: 350px;

      li {
        margin-bottom: 3px;

        a {
          font-size: 16px;
        }
      }
    }
  }
}
</style>